
import {HashRouter as Hash ,BrowserRouter as History , Route , Switch, Link ,NavLink , Redirect  } from "react-router-dom"
import "./index.scss"
import { getQuery } from "../utils";
import { Nested } from "./nested";

export class MainRouter extends Component{
  render(){
    return (
      <div>
        <h2> 路由学习 - RR4 - react-router-dom4.0  </h2>
        <hr/>
        <MyRouter></MyRouter>
      </div>
    )
  }
}


class MyRouter extends Component{
  render(){
    return (
      <Hash
        basename="/" 
        keyLength={20}
      >
          <Route  component={RootCpt} />
      </Hash>
    )
  }
}

class Home extends Component{
  render(){
    const {location} = this.props;
    return (
      <div>
        <h2> Home - home - HOme </h2>
        <h1> id === {new URLSearchParams(location.search).get('id') }</h1>
      </div>
    )
  }
}

// 非路由组件 
class Demo extends Component{
  render(){
    console.log(this.props)
    return (
      <div>
        <h2>  Demo  -  Demo - Demo </h2>
      </div>
    )
  }
}


// 路由组件 
class Find extends Component{
  goback=()=>{
    // history.go(-1)
    // history.back()
    // this.props.history.go(-1);
    this.props.history.goBack()
  }
  gotomine=()=>{
    this.props.history.push("/mine/zuozuomu?text=AREYOUOKOKOKOK")
  }
  render(){
    console.log(this.props)
    const {match,location,history} = this.props;
    // history  路由跳转 push 
    // match  获取路由参数   : 
    // location  获取查询参数  ? 
    return (
      <div>
        <h2> Find - Find - 主页 </h2>
        <div>
          <h2> : 声明的 路由参数 params</h2>
          <p>uid === {match.params.uid }</p>
          <p>address === {match.params.address }</p>
          <h2>? 声明的查询参数  search query</h2>
          <p>
            time == {getQuery(location.search).time}
          </p>
          <p>
            msg == {getQuery(location.search).msg}
          </p>
          <p>time - { new URLSearchParams(location.search).get('time')}  </p>
          <p>msg - { new URLSearchParams(location.search).get('msg')}  </p>

        </div>
        <button onClick={this.goback}>点击返回</button>
        <button onClick={this.gotomine}>进入个人中心</button>
        <hr/>
        <Demo></Demo>
      </div>
    )
  }
}

// 纯函数 props
function Mine({match,location}){
  return (
    <div>
      <h2>个人中心 </h2>
      <h2>username -- {match.params.username}</h2>
      <p>text -- {new URLSearchParams(location.search).get('text')}</p>
    </div>
  )
}

class Login extends Component{
  render(){
     return (
       <div>
         <h2> login  - Login - 登录 </h2>
       </div>
     )
  }
}

class NotFound extends Component{
   render(){
     return (
       <div>
         <h2> 404 - 404 - NotFound </h2>
       </div>
     )
   }
}

function Zhuce(){
  return (
    <div>
      <h2> Zhuce - Zhuce - 注册 </h2>
    </div>
  )
}

function User(){
  return (
    <div>
      <h2>用户信息 - user - user -user </h2>
    </div>
  )
}

// router.js  路由具体配置 
class RootCpt extends Component{
   render(){
     return (
       <div>
          <h4>我是主页面... RootCpt</h4>
          <div style={{minHeight:290, width:'90%',margin:"20px auto",border:'1px solid deeppink',borderRadius:10}}>
            <Switch>
                {/* <Route path="/" exact  component={Home}/> */}
                <Route path="/" exact  render={()=><Redirect to="/home"/>}/>

                <Route path="/home" component={Home}/>
                <Route path="/find/:uid/info/:address?" component={Find}/>
                
                <Route path="/mine/admin" render= {
                  ()=>( <div> <h2> admin - admin - 管理员中心 </h2></div>)
                }/>
                <Route path="/mine/:username" render={Mine}/>
                <Route path="/login" component={Login }/>
                <Route path="/zhuce" render={Zhuce }/>
                <Route path="/user/"  strict render={User }/>

                <Route path="/nested"  component={Nested}  />
                <Route path="/404" component={NotFound} />
                {/* <Route component={NotFound} /> */}
                <Route render={()=><Redirect to="/404"  />} />

            </Switch>
          </div>
          <div style={{minHeight:100, width:'90%',margin:"20px auto",border:'1px solid yellowgreen',borderRadius:10}}> 
             <a href="#/home">首页</a>
             <NavLink to="/home?id=1024" activeClassName="active"> 首页1 </NavLink>
             <NavLink to="/find/2107/info/武汉?time=2021&msg=daydayup" activeClassName="active"> 发现 1</NavLink>
             <NavLink to="/find/2110/info?time=2000&msg=天道酬勤" activeClassName="active"> 发现 2</NavLink>
             <NavLink to="/mine/huahua?text=2107YYDS" activeClassName="active"> 我的 - 花花</NavLink>
             <NavLink to="/login" activeClassName="active"> 登录 </NavLink>
             <NavLink to="/zhuce" activeClassName="active"> 注册 </NavLink>
             <NavLink to="/user/one" activeClassName="active"> 用户信息  </NavLink>
             <NavLink to="/mine/admin" activeClassName="active"> 管理员  </NavLink>
             <NavLink to="/nested" activeClassName="active"> 我的嵌套路由  </NavLink>
          </div>
       </div>
     )
   }
}